<template>
  <div class="group-brief pd-4">
    <CustomButton title="编辑" class="mg-bottom-20" @click="dialogVisible=true"></CustomButton>
    <div class="brief">
      <div v-for="({name,content},id) in briefList" :key="id" class="item">
        <div class="name">
          {{ name }}
        </div>
        <div v-if="name==='接入设备数'" class="content pd-left-20 justify-between">
          {{ content }}
          <el-button type="text" style="color: #0084EE;" @click="handleNav">前往管理</el-button>
        </div>
        <div v-else class="content pd-left-20">
          {{ content }}
        </div>
      </div>
    </div>
    <CreateOrUpdate
      title="编辑基本信息"
      :visible.sync="dialogVisible"
      :value="gatewayBrief"
      @manage-device="handleMangeDevice"
      @change="findGroupById"
    />
  </div>
</template>

<script>
import { apiFindGroupById } from '../api'
import dayjs from 'dayjs'
import { mapMutations } from 'vuex'
import CreateOrUpdate from './create-or-update'
import CustomButton from '@/components/custom-button'

export default {
  name: 'GatewayBrief',
  components: { CustomButton, CreateOrUpdate },
  data() {
    return {
      gatewayId: '',
      gatewayBrief: {},
      dialogVisible: false,
    }
  },
  computed: {
    briefList() {
      return [
        {
          name: '网关名称',
          content: this.gatewayBrief.name || '',
        },
        {
          name: '网关编号',
          content: this.gatewayBrief.gatewayNo || '',
        },
        {
          name: '创建时间',
          content: dayjs(this.gatewayBrief.createTime).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
          name: '接入设备数',
          content: this.gatewayBrief.deviceNums || 0,
        },
        {
          name: '当前在线',
          content: this.gatewayBrief.deviceOnlineNums || 0,
        },
        {
          name: '备注说明',
          content: this.gatewayBrief.remark || '',
        },
      ]
    },
  },
  created() {
    this.initData()
  },
  methods: {
    ...mapMutations({
      setRouterSubTitle: 'user/SET_ROUTER_SUBTITLE',
    }),
    initData() {
      this.gatewayId = this.$route.query.id
      this.findGroupById()
    },
    // 更新数据
    reflash() {
      this.initData()
    },
    handleNav() {
      // 前往管理
      this.$emit('manage-device')
    },
    async findGroupById() {
      try {
        this.gatewayBrief = await apiFindGroupById(this.gatewayId)
        this.setSubTitle()
      } catch (e) {
        this.$message.error(e)
      }
    },
    setSubTitle() {
      const subTitle = `
        <span>${this.gatewayBrief.name}</span>
        <span class="mg-left-20">最近修改时间：${dayjs(
          this.gatewayBrief.updateTime || this.gatewayBrief.createTime
        ).format('YYYY-MM-DD hh:mm:ss')}</span>
        `
      this.setRouterSubTitle(subTitle)
    },
    handleMangeDevice() {
      this.$emit('manage-device')
      this.dialogVisible = false
    },
  },
  beforeDestroy() {
    this.setRouterSubTitle(null)
  },
}
</script>

<style scoped lang="scss">
.brief {
  display: flex;
  border-right: none;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  flex-wrap: wrap;

  .item {
    display: flex;
    width: 33.33%;
    line-height: 40px;

    &:last-child {
      flex: 1;
    }

    .name {
      width: 200px;
      font-weight: bold;
      text-align: center;
      background-color: #f2f2f2;
      border-top: 1px solid #999;
      border-left: 1px solid #999;
    }

    .content {
      color: #999;
      border-top: 1px solid #999;
      border-left: 1px solid #999;
      flex: 1;
    }
  }
}
</style>
